<template>
  <div class="page" :style="{ height: height }">
    <view class="downLoad">
      <view class="left">
        <u-avatar src="../../static/logo.png" shape="square"></u-avatar>
        <text> Get the full experience on the app</text>
      </view>
      <view class="right">
        <u-button
          @tap="clickDownLoad"
          type="primary"
          size="small"
          shape="circle"
          text="open"
        ></u-button>
      </view>
    </view>
    <swiper
      class="swiper"
      :vertical="true"
      @change="changeCurrent"
      @animationfinish="animationFinish"
      :current="index"
    >
      <swiper-item
        v-for="(item, idx) in videoList"
        :key="idx"
        class="swiper-item"
      >
        <!-- 视频渲染数预加载数影响性能 -->
        <div v-if="Math.abs(index - idx) <= 1" class="video-box">
          <block v-if="item.src">
            <user-video
              class="video"
              :src="item.src"
              :height="height"
              :width="width"
              :play="item.flag"
              v-if="Math.abs(index - idx) <= 1"
              :gDuration="item.duration"
              :initialTime="item.initialTime"
              @pause="pauseVideo"
              :objectFit="item.objectFit"
              @playEnd="playEnd"
              :danmuList="danmuList"
            >
            </user-video>
            <cover-view class="cover-view-left">
              <cover-view class="left-view">
                <!-- #ifdef APP-PLUS-NVUE -->
                <text class="left-text">{{ item.content }}</text>
                <!-- #endif -->
                <!-- #ifndef APP-PLUS-NVUE -->
                <cover-view class="left-text">{{ item.content }}</cover-view>
                <!-- #endif -->
              </cover-view>
            </cover-view>
            <cover-view class="cover-view-right">
              <cover-image
                :src="
                  item.check
                    ? '../../static/aixinRed.png'
                    : '../../static/aixin.png'
                "
                class="img"
                @click.stop="tapLove"
              ></cover-image>

              <!-- #ifdef APP-PLUS-NVUE -->
              <text class="right-text">{{ item.like }}</text>
              <!-- #endif -->
              <!-- #ifndef APP-PLUS-NVUE -->
              <cover-view class="right-text">{{ item.like }}</cover-view>
              <!-- #endif -->

              <cover-image
                src="../../static/xiaoxi.png"
                class="img"
                @click.stop="tapMsg(item)"
              ></cover-image>

              <!-- #ifdef APP-PLUS-NVUE -->
              <text class="right-text">{{ item.comment }}</text>
              <!-- #endif -->
              <!-- #ifndef APP-PLUS-NVUE -->
              <cover-view class="right-text">{{ item.comment }}</cover-view>
              <!-- #endif -->

              <cover-image
                src="../../static/share-fill.png"
                class="img"
                @click.stop="tapShare"
              ></cover-image>

              <!-- #ifdef APP-PLUS-NVUE -->
              <text class="right-text">分享</text>
              <!-- #endif -->
              <!-- #ifndef APP-PLUS-NVUE -->
              <cover-view class="right-text">分享</cover-view>
              <!-- #endif -->
            </cover-view>
          </block>
          <div
            :style="{ height: height }"
            style="
              text-align: center;
              justify-content: center;
              align-items: center;
            "
            class="video-box"
            v-else
          >
            <text style="color: #ffffff; font-size: 12px">没有数据</text>
            <text style="color: #ffffff; font-size: 10px"
              >-或者数据加载失败-</text
            >
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import userVideo from "../../components/user-video/user-video";
export default {
  components: {
    userVideo,
  },
  data() {
    return {
      currentTime: 0,
      tuday: "",
      timer: null,
      sysheight: 0,
      playCount: 2, //剩余多少视频加载视频列表
      videoList: [],
      height: "667px",
      index: 0,
      width: "",
      oldIndex: 0,
      page: 1,
      Offset: 0,
      danmuList: [
        // {text: '发条弹幕0',color: '#fff',time: 2,avatar:'../../static/avatar.png'},
        // {text: '发条弹幕1',color: '#fff',time: 3,avatar:'../../static/avatar.png'},
        // {text: '发条弹幕2',color: '#fff',time: 4,avatar:'../../static/avatar.png'},
        // {text: '发条弹幕3',color: '#fff',time: 5,avatar:'../../static/avatar.png'},
      ],
    };
  },
  created() {
    //#ifdef APP-PLUS
    plus.screen.lockOrientation("portrait-primary");
    //隐藏subnvue
    uni.getSubNVueById("comment").hide();
    uni.getSubNVueById("input-box").hide();
    //#endif
    this.sysheight = uni.getSystemInfoSync().windowHeight;
    this.height = `${this.sysheight}px`;
    let width = uni.getSystemInfoSync().windowWidth;
    this.width = `${width}px`;
    this.videoList.length = 300;
    this.videoList.fill({
      src: "",
    });
  },
  async mounted() {
    await this.pushVideoList();
    await this.initData();
    if (!this.index) {
      this.$nextTick(() => {
        this.videoPlay(this.index);
      });
    }
  },
  onLoad() {
    this.currentTime = 0;
    this.currentTimenum();
  },
  onUnload() {
    if (this.timer) {
      this.clearIntervalnum();
    }
  },
  onHide() {
    //plus.navigator.setFullscreen(false);
    for (let item of this.videoList) {
      item.flag = false;
    }
    if (this.timer) {
      this.clearIntervalnum();
    }
  },
  onShow() {
    uni.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#000000",
      complete: () => {
        this.navLock = false;
      },
    });
    //plus.navigator.setFullscreen(true);
    this.videoPlay(this.index);
  },
  methods: {
    currentTimenum() {
      let that = this;
      this.timer = setInterval(function () {
        that.currentTime = that.currentTime + 1;
        //console.log(that.currentTime);
      }, 1000);
    },
    clearIntervalnum() {
      let that = this;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
      if (that.currentTime > 0) {
        if (uni.getStorageSync("currentTime")) {
          var currentTime = uni.getStorageSync("currentTime") * 1;
        } else {
          var currentTime = 0;
        }
        if (this.tuday == uni.getStorageSync("tuday")) {
          uni.setStorage({
            //缓存配置信息
            key: "currentTime",
            data: this.currentTime * 1 + currentTime * 1,
          });
        } else {
          this.currentTime = 0;
          uni.setStorage({
            //缓存配置信息
            key: "tuday",
            data: this.tuday,
          });
          uni.setStorage({
            //缓存配置信息
            key: "currentTime",
            data: currentTime * 1,
          });
        }
        console.log(uni.getStorageSync("currentTime"));
      }
    },
    animationFinish(e) {
      //#ifdef APP-PLUS
      this.changeCurrent(e);
      //#endif
    },
    changeCurrent(e) {
      this.index = e.detail.current;

      this.$nextTick(() => {
        for (let item of this.videoList) {
          item.flag = false;
        }

        this.videoList[this.index].flag = true;
      });
    },
    pushVideoList() {
      let this_ = this;
      let promise = new Promise((resolve, reject) => {
        uni.request({
          url:
            "http://v2.demo.hongcd.com/api/video/videoRecommend?page=" +
            this.page,
          success: (res) => {
            if (res.data.tuday) {
              this.tuday = res.data.tuday;
            }
            this.page = this.page + 1;
            let videoGroup = [];
            if (res.data.result) {
              for (let item of res.data.result) {
                if (item.type == "videoSmallCard") {
                  videoGroup.push({
                    src: item.videourl,
                    content: item.name,
                    flag: false,
                    check: false,
                    like: "7w",
                    comment: "1045",
                    at: item.nickname,
                    id: item.nickname,
                    avater: item.avatar,
                    initialTime: 0,
                    duration: 900,
                    // objectFit:'fill'
                  });
                }
              }
            }
            console.log(this.page);
            let len = this.videoList.filter((item) => item.src).length;
            for (let i = len; i < len + videoGroup.length; i++) {
              this.$set(this.videoList, i, videoGroup[i - len]);
            }
            resolve();
          },
        });
      });
      return promise;
    },
    initData() {
      let this_ = this;
      let promise = new Promise((resolve, reject) => {
        //https://wx.flowers.mirrorer.com/api/front/category?cid=&region=
        uni.request({
          url: "http://139.159.160.169:7077/video/discover",
          header: {
            Authorization:
              "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJJRCI6OSwiZXhwIjoxNzAyNTY3NDg5fQ.ZKWZJw0EKfWMwu4vLUJ1z3TDjnxjwGuT7z4q577S6TQ",
            "content-type": "application/json",
            "Access-Control-Allow-Origin": "*",
          },
          method: "POST",
          data: {
            Offset: this.Offset,
            Limit: 1,
          },
          success: (res) => {
            console.log("res: ", res);
            this.Offset = this.Offset + 1;
            let videoGroup = [];
            if (res.data.result) {
              for (let item of res.data.Data.List) {
                videoGroup.push({
                  src: item.Address,
                  content: item.Title,
                  flag: false,
                  check: false,
                  like: "7w",
                  comment: "1045",
                  initialTime: 0,
                  duration: 900,
                });
              }
            }
            let len = this.videoList.filter((item) => item.src).length;
            for (let i = len; i < len + videoGroup.length; i++) {
              this.$set(this.videoList, i, videoGroup[i - len]);
            }
            resolve();
          },
        });
      });
      return promise;
    },
    tapLove() {
      this.videoList[this.index].check = !this.videoList[this.index].check;
      this.videoList = [...this.videoList];
    },
    tapAvater() {
      //点击索引为${this.index}的头像
      uni.showToast({
        icon: "none",
        title: `关注功能开发中`,
      });
    },
    tapMsg(item) {
      //#ifndef APP-NVUE
      uni.showToast({
        icon: "none",
        title: `评论功能开发中`,
      });
      //#endif
      //#ifdef APP-NVUE
      // uni.getSubNVueById('comment').show('none',0,()=>{
      // 	uni.$emit('showComment',item.content)
      // });
      uni.showToast({
        icon: "none",
        title: `评论功能开发中`,
      });
      //#endif
    },
    tapShare() {
      uni.showToast({
        icon: "none",
        title: `分享功能开发中`,
      });
    },
    videoPlay(index) {
      let promise = new Promise((resolve, reject) => {
        resolve();
      });
      promise.then((res) => {
        this.$set(this.videoList[index], "flag", !this.videoList[index].flag);
      });
    },
    pauseVideo(val) {
      console.log("val: ", val);
      if (typeof this.videoList[this.oldIndex].initialTime != "undefined")
        this.videoList[this.oldIndex].initialTime = val;
    },
    clickVideo() {
      this.videoList[this.index].flag = !this.videoList[this.index].flag;
    },
    clickDownLoad() {
      uni.navigateTo({
        url: "/pages/downLoad/downLoad",
      });
    },
  },
  watch: {
    index(newVal, oldVal) {
      let len = this.videoList.filter((item) => item.src).length;
      //加载视频
      if (len - this.index - 1 <= this.playCount) {
        // this.pushVideoList();
        this.initData();
      }
      this.oldIndex = oldVal;
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  position: relative;
  background-color: #000;
  width: 100%;
}

.downLoad {
  position: fixed;
  top: 0rpx;
  left: 0;
  width: 100%;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  //背景颜色渐变
  background: linear-gradient(to right, #fe5d68, #fe7861);
  padding: 0 30rpx;
  z-index: 9999;

  .left {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #fff;

    .u-avatar {
      margin-right: 20rpx;
    }
  }

  .right {
    .u-button--primary {
      background-color: #fff;
      border: none;
      color: #fe5d68;
      text-transform: uppercase;
    }
  }
}

.swiper {
  flex: 1;
  background-color: #000;
}

.swiper-item {
  flex: 1;
}

.video {
  flex: 1;
}

.video-box {
  flex: 1;
  width: 750rpx;
}

.video-boxf {
  height: 200rpx;
  width: 200rpx;
  justify-content: center;
  align-items: center;
}

.cover-view-center {
  position: absolute;
  justify-content: center;
  align-items: center;
  opacity: 0.1;
  z-index: 999;
}

.cover-view-left {
  position: absolute;
  margin-left: 20upx;
  width: 500upx;
  bottom: 120upx;
  z-index: 9999;
  font-size: 16px;
  color: #ffffff;
  /* #ifndef APP-PLUS */
  white-space: pre-wrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* #endif */
}

.left-view {
  margin-bottom: 20upx;
}

.left-text {
  font-size: 16px;
  color: #ffffff;
}

.avater {
  border-radius: 50upx;
  border-color: #fff;
  border-style: solid;
  border-width: 2px;
}

.cover-view-right {
  position: absolute;
  bottom: 160upx;
  right: 20upx;
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  flex-direction: column;
  /* #endif */
  z-index: 9999;
}

.right-text-avater {
  position: absolute;
  font-size: 14px;
  top: 80upx;
  left: 30upx;
  height: 40upx;
  width: 40upx;
  background-color: #dd524d;
  color: #ffffff;
  border-radius: 50%;
  text-align: center;
  line-height: 40upx;
  z-index: 999;
}

.avater-icon {
  height: 40upx;
  width: 40upx;

  color: #fff;
  background-color: #dd524d;
  border-radius: 50%;
  position: absolute;
  left: 30upx;
  top: -20upx;
}

.right-text {
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  margin-bottom: 50upx;
  height: 20px;
}

.img {
  height: 100upx;
  width: 100upx;
  opacity: 0.9;
}

.page {
  /* #ifndef APP-PLUS-NVUE */
  display: flex;
  flex-direction: column;
  /* #endif */
  flex: 1;
}
</style>
